
{% extends "header.html" %}

{% block title %}Hominin.net | Map{% endblock %}

{% block content %} 
{% if all_fossils_list %}

<div id="map" style="width: 100%; height: 650px"></div>

<script type="text/javascript">
//<![CDATA[

if (GBrowserIsCompatible()) { 

function createMarker(point,html) {
	var marker = new GMarker(point);
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(html);
	});
	return marker;
}

var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(14.885838, 33.195312), 3, G_PHYSICAL_MAP);
{% for specimen in all_fossils_list %}
var point = new GLatLng({{ specimen.latitude }},{{ specimen.longitude }});
var marker = createMarker(point,'<div style="width:300px"><a href="/specimens/{{ specimen.slug }}/"><strong>{{ specimen.specimen_name }}</strong></a><br /><em>{{ specimen.species }}</em></div>')
map.addOverlay(marker);
{% endfor %}
}

else {
	alert("Sorry, the Google Maps API is not compatible with this browser");
}

//]]>
</script>
{% else %}
<p>No fossils are available.</p>
{% endif %}
{% endblock %}
